<template>
<Card style="height:800px">
  <Row>
    <i-button type="primary" @click="handleAdd">新建</i-button>
  </Row>
  <Row>
    <Table :columns="columns1" :data="dataPage" style="margin-top: 10px;">
    </Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="text-align: center;margin-top: 36px;">
        <Page :total="dataTotal" :current="pageNo" :page-size="pageSize" @on-change="handlePageChange" size="small" show-elevator show-total>
        </Page>
      </div>
    </div>
  </Row>
</Card>
</template>

<script>
export default {
  data () {
    return {
      $ajax: null,
      columns1: [{
        title: '序号',
        type: 'index',
        width: 80,
        align: 'center'
      },
        // ,
        // {
        //     align: 'center',
        //     title: 'ID',
        //     key: 'facesig_id',
        // }
      {
        align: 'center',
        title: '版本ID',
        key: 'id',
        render: (h, params) => {
          var vm = this
          return h('div', [
            h('a', {
              style: {
                // textDecoration: 'underline',
                decoration: 'none'
              },
              on: {
                click: function () {
                  vm.$router.push({
                    name: 'parameterEditor',
                    query: {
                      type: 4,
                      id: params.row.id,
                      facesigId: params.row.facesigId
                    }
                  })
                }
              }
            }, params.row.id)
          ])
        }
      },
      {
        align: 'center',
        title: '生效时间（起）',
        key: 'startTakeeffectTime',
        // sortable:'custom',
        // sortType:'desc',
        render: (h, params) => {
          var vm = this
          return h('div', [
            h('span', vm.$util.formatTime(params.row.startTakeeffectTime))
          ])
        }
      },
      {
        align: 'center',
        title: '生效时间（止）',
        key: 'endTakeeffectTime',
        // sortable:'custom',
        // sortType:'desc',
        render: (h, params) => {
          var vm = this
          return h('div', [
            h('span', vm.$util.formatTime(params.row.endTakeeffectTime))
          ])
        }
      }, {
        align: 'center',
        title: '预约时间（起）',
        key: 'startTime',
        // sortable:'custom',
        // sortType:'desc',
        render: (h, params) => {
          return h('div', [
            h('span', params.row.startTime)
          ])
        }
      }, {
        align: 'center',
        title: '预约时间（止）',
        key: 'endTime',
        // sortable:'custom',
        // sortType:'desc',
        render: (h, params) => {
          // for(var i = 0 ; i <params.row.faceSigConfigurationList.length;i++){
          return h('div', [
            h('span', params.row.endTime)
          ])
          // }
        }
      }, {
        align: 'center',
        title: '状态',
        key: 'status',
        render: (h, params) => {
          var vm = this
          return h('div', [
            h('span', vm.renderColumnContext(params))
          ])
        }
      }, {
        align: 'center',
        title: '操作',
        width: 200,
        key: 'action',
        render: (h, params) => {
          var vm = this
          if (params.row.status === 0) {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    vm.$router.push({
                      name: 'parameterEditor',
                      query: {
                        type: 1,
                        id: params.row.id,
                        facesigId: params.row.facesigId
                      }
                    })
                  }
                }
              }, ' 编辑'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    vm.$router.push({
                      name: 'parameterEditor',
                      query: {
                        type: 3,
                        id: params.row.id,
                        facesigId: params.row.facesigId
                      }
                    })
                  }
                }
              }, '新增')
            ])
          }
        }
      }
      ],
      // startTime,
      // endTime,
      // timeConfHistoryId,
      // updatedDate,
      // FaceSigCount,
      // status,
      mapList: [],
      dataPage: [],
      value: '',
      index: 0,
      dataTotal: 0,
      pageTotal: 1,
      pageNo: 1,
      pageSize: 10,
      choosedRow: null
    }
  },
  methods: {
    // 表格单元格渲染布尔值
    renderColumnContext: function (rowContext) {
      if (rowContext.column.key === 'status') {
        var status = rowContext.row.status
        if (status === 0) {
          return '有效'
        } else if (status === 1) {
          return '无效'
        }
      }
    },
    // 分页查询
    searchPage (initParam) {
      var params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        param: {}
      }
      var url = this.$appContext.marvels_core_approve + '/approve/mqcspz/service/facesigconfigPageList/' + params.pageNo + '/' + params.pageSize
      this.$ajax.post(url, params).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        this.dataPage = data.data.list
        this.dataTotal = data.data.total
        this.pageTotal = data.data.pages
        this.pageNo = data.data.pageNum
      }).catch(er => {})
    },
    // 翻页
    handlePageChange (index) {
      this.pageNo = index
      this.searchPage()
    },
    // 新建按钮
    handleAdd () {
      this.$router.push({
        name: 'parameterEditor',
        query: {
          type: 2
        }
      })
    }
  },
  mounted () {
    this.$ajax = this.$util.ajax(this.$appContext.marvels_core_approve)
    this.searchPage()
  },
  created: function () {

  },
  components: {

  }
}
</script>
